import { Directive, HostListener, ElementRef, Renderer2, Input } from '@angular/core';
import { DragDrapService } from '../drag-drap.service';

// 拖
@Directive({
  selector: '[app-Draggable][dragTag][dragData][draggedCalss]'
})
export class DragDirective {
  // [app-Droppable] 指令 可扩展(可外部 输入 @Input) 提供 get set 方法
  private _isDraggble =false;

  // 暴露指令名  app-Droppable 组件使用 app-Droppable = 'true'
  @Input('app-Draggable') 
  set isDraggable(val){
    this._isDraggble = val;
    
    this.rd.setAttribute(this.el.nativeElement,'draggable',`${val}`);
  }
  get isDraggable(){
    return this._isDraggble;
  }
 @Input() draggedCalss: string;
 @Input() dragTag:string;
 @Input() dragData:any;

  constructor(private el: ElementRef, private rd: Renderer2,private dragServes:DragDrapService) { }

    // 开始拖拽
    @HostListener('dragstart', ['$event'])
    onDragStart(ev: Event) {
      // 判断拖拽 是否是 当前应用的元素 发起的
      if (this.el.nativeElement === ev.target) {
        this.rd.addClass(this.el.nativeElement, this.draggedCalss);
        this.dragServes.setDragData({tag:this.dragTag,data:this.dragData})
      }
    }
  
    // 结束拖拽
    @HostListener('dragend', ['$event'])
    onDragEnd(ev: Event) {
      // 判断拖拽 是否是 当前应用的元素 发起的
      if (this.el.nativeElement === ev.target) {
        this.rd.removeClass(this.el.nativeElement, this.draggedCalss);
      }
    }



}
